import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function InvestorActivities() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.investorActivities')} - 豆豆Pay`,
    description: t('seo.pages.investorActivities.description')
  });
  const hreflangTags = generateHreflangTags('/investor-relations/activities');
  const structuredData = generateStructuredData(seoConfig, 'website');
  
  // 模拟投资者活动数据
  const investorActivities = [
    {
      id: 1,
      title: t('investor.activity1Title'),
      date: '2024-09-15',
      time: '14:00 - 16:00',
      location: t('investor.activity1Location'),
      type: t('investor.conferenceCall'),
      description: t('investor.activity1Desc'),
      registration: true
    },
    {
      id: 2,
      title: t('investor.activity2Title'),
      date: '2024-08-28',
      time: '09:30 - 11:30',
      location: t('investor.activity2Location'),
      type: t('investor.annualMeeting'),
      description: t('investor.activity2Desc'),
      registration: false
    },
    {
      id: 3,
      title: t('investor.activity3Title'),
      date: '2024-07-10',
      time: '15:00 - 17:00',
      location: t('investor.activity3Location'),
      type: t('investor.investorMeeting'),
      description: t('investor.activity3Desc'),
      registration: false
    },
    {
      id: 4,
      title: t('investor.activity4Title'),
      date: '2024-06-05',
      time: '10:00 - 12:00',
      location: t('investor.activity4Location'),
      type: t('investor.earningsCall'),
      description: t('investor.activity4Desc'),
      registration: false
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-gray-50 to-gray-900">
         <div className="container mx-auto px-4">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
             className="max-w-3xl mx-auto text-center"
           >
             <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
               {t('header.investorActivities')}
             </h1>
             <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
             <p className="text-lg md:text-xl text-gray-300 leading-relaxed">
               {t('investor.investorActivitiesDesc')}
             </p>
           </motion.div>
         </div>
       </section>
        
        {/* 投资者活动列表 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              {/* 活动筛选 */}
              <div className="mb-12 flex flex-wrap justify-between items-center">
                <div className="flex items-center mb-4 md:mb-0">
                  <span className="text-gray-700 mr-4">{t('investor.filterBy')}:</span>
                  <div className="relative">
                    <select className="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
                      <option value="all">{t('investor.allActivities')}</option>
                      <option value="upcoming">{t('investor.upcomingActivities')}</option>
                      <option value="past">{t('investor.pastActivities')}</option>
                    </select>
                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                      <i className="fa-solid fa-chevron-down text-xs"></i>
                    </div>
                  </div>
                </div>
                
                <div className="relative">
                  <input
                    type="text"
                    placeholder={t('investor.searchActivities')}
                    className="bg-gray-50 border border-gray-200 text-gray-700 py-2 px-4 pl-10 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 w-full md:w-64"
                  />
                  <div className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                    <i className="fa-solid fa-search"></i>
                  </div>
                </div>
              </div>
              
              {/* 活动列表 */}
              <div className="space-y-8">
                {investorActivities.map((activity) => (
                  <motion.div
                    key={activity.id}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: (activity.id - 1) * 0.1 }}
                    viewport={{ once: true }}
                    className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
                  >
                    <div className="md:flex">
                      {/* 活动日期 */}
                      <div className={`md:w-40 p-6 flex flex-col items-center justify-center ${
                        activity.registration ? 'bg-green-50 border-r border-green-100' : 'bg-gray-50 border-r border-gray-100'
                      }`}>
                        <div className="text-3xl font-bold text-gray-900">{activity.date.split('-')[2]}</div>
                        <div className="text-sm text-gray-600">
                          {activity.date.split('-')[0]}年{activity.date.split('-')[1]}月
                        </div>
                        <div className="mt-4 text-sm font-medium text-gray-700">
                          {activity.time}
                        </div>
                        {activity.registration && (
                          <div className="mt-4 px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
                            {t('investor.upcoming')}
                          </div>
                        )}
                      </div>
                      
                      {/* 活动详情 */}
                      <div className="p-6 md:p-8 flex-grow">
                        <div className="flex flex-wrap justify-between items-start mb-4">
                          <h3 className="text-xl font-bold text-gray-900 mb-2 md:mb-0">
                            {activity.title}
                          </h3>
                          <span className="inline-block px-3 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded-full">
                            {activity.type}
                          </span>
                        </div>
                        
                        <div className="flex items-start mb-4">
                          <i className="fa-solid fa-map-marker-alt text-gray-500 mt-1 mr-3"></i>
                          <span className="text-gray-700">{activity.location}</span>
                        </div>
                        
                        <p className="text-gray-600 mb-6">
                          {activity.description}
                        </p>
                        
                        <div className="flex flex-wrap justify-between items-center">
                          {activity.registration ? (
                            <button className="px-5 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors shadow-sm hover:shadow">
                              {t('investor.registerNow')}
                            </button>
                          ) : (
                            <div className="text-gray-500 text-sm">
                              <i className="fa-solid fa-clock-o mr-2"></i>
                              {t('investor.activityEnded')}
                            </div>
                          )}
                          
                          <div className="flex space-x-4 mt-4 md:mt-0">
                            {!activity.registration && (
                              <>
                                <a href="#" className="text-gray-600 hover:text-gray-900 text-sm flex items-center">
                                  <i className="fa-solid fa-file-pdf mr-1"></i>
                                  {t('investor.materials')}
                                </a>
                                <a href="#" className="text-gray-600 hover:text-gray-900 text-sm flex items-center">
                                  <i className="fa-solid fa-video mr-1"></i>
                                  {t('investor.recording')}
                                </a>
                              </>
                            )}
                          </div>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
              
              {/* 加载更多 */}
              <div className="mt-12 text-center">
                <button className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium rounded-md transition-colors">
                  {t('investor.loadMore')}
                  <i className="fa-solid fa-chevron-down ml-2 text-xs"></i>
                </button>
              </div>
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}